
<template>
  <div
      class="drag-move-box"
      @click.stop="$emit('handleSelectItem', record)"
      :class="{ active: record.key === selectItem.key }"
  >

    <div class="form-item-box">
      <FormItem :formConfig="config" :models="models" :record="record" :isDragPanel="true"/>
    </div>
    <div v-if="!hideModel" class="show-key-box" v-text="record.model"/>
    <div
        class="copy"
        :class="record.key === selectItem.key ? 'active' : 'unactivated'"
        @click.stop="$emit('handleCopy')"
    >
      <Icon type="ios-copy-outline"/>
    </div>
    <div
        class="delete"
        :class="record.key === selectItem.key ? 'active' : 'unactivated'"
        @click.stop="$emit('handleDetele')"
    >
      <Icon type="ios-close"/>

    </div>
  </div>
</template>
<script>

import FormItem from '../../../items/index';

export default {
  props: {
    record: {
      type: Object,
      required: true,
    },
    selectItem: {
      type: Object,
      default: () => {
      },
    },
    config: {
      type: Object,
      required: true,
    },
    hideModel: {
      type: Boolean,
      default: false,
    },
  },
  data() {
    return {
      models: {},
    };
  },
  components: {
    FormItem,
  },
};
</script>
